<template>
  <div>
    <div class="sysMsg">
      <div class="header" v-if="msgList.length!=0">
        <div style="color: gray;">共{{msgList.length}}条消息</div>
        <el-popconfirm title="确定删除所有已读内容吗？" @confirm="$emit('clearMsg',1)">
          <div style=" cursor: pointer;color: rgb(73, 177, 245) !important;" slot="reference">
            <i class="el-icon-delete"></i>
            清空所有消息
          </div>
        </el-popconfirm>
      </div>
      <div v-for="(item,index) in msgList" :key="index">
        <el-row style="border-top:1px solid rgb(159, 156, 156) ; margin:5px 0 ;padding: 8px 0; ">
          <el-col :span="4">
            <div class="avatar-container">
              <el-avatar :size="40" :src="item.userVo?.avatar">
              </el-avatar>
              <div class="text-container">
                <span>{{item.userVo?.nickname}}<i style="    color: rgb(73, 177, 245);">(站主)</i></span>
                <div>{{convertTimestampToReadable(item?.createTime)}}</div>
              </div>
            </div>
          </el-col>
          <el-col :span="19">
            <div style="font-weight: 700;">
              {{item.msg}}
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="empty" v-if="msgList.length == 0">
      <img src="https://image.kuailemao.xyz/blog/loading/loading-gif.gif" alt="">
      <div>暂时没有消息哦~</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'sysMsg',
    props: ["msgList"],
    data() {
      return {

      };
    },
    mounted() {

    },
    methods: {
      convertTimestampToReadable(timestamp) {
        // 创建 Date 对象
        const date = new Date(timestamp);
        // 获取年、月、日
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，所以加 1
        const day = String(date.getDate()).padStart(2, '0');
        // 返回格式化的日期字符串
        return `${year}-${month}-${day}`;
      }
    },
  };
</script>
<style>
  .sysMsg {
    padding: 0 10px;
    /* display: flex; */
    flex-direction: column;

    .header {
      display: flex;
      margin: 10px 0;
      justify-content: space-between;
    }

    .avatar-container {
      display: flex;
      align-items: center;
      /* 垂直居中 */
      margin-right: 5px;
      /* border-right: 1px solid rgb(167, 160, 160); */
    }

    .text-container {
      display: flex;
      flex-direction: column;
      /* 垂直排列 */
      align-items: flex-start;

    }

    .text-container span {
      margin-bottom: 4px;
      /* 与日期的间距 */
    }
  }

  .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
    /* 可以根据需要调整高度 */
  }

  .empty img {
    margin-bottom: 10px;
    /* 图片与文本之间的间距 */
  }
</style>